<template>
    <div class="home">
         <!-- 轮播图 -->
        <div class='rotograph'>
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
              <van-swipe-item v-for='item in list' :key="item.id">
                  <img :src="`http://liufusong.top:8080${item.imgSrc}`" alt="">
              </van-swipe-item>
            </van-swipe>
        </div>
        <!-- 搜索栏 -->
        <div class="search">
           <div class="diqu" @click='tiaozhuan'>
               <span>{{$store.state.user.dizhi}}</span>
               <van-icon name="arrow-down" />
           </div>
              <van-search v-model="value" placeholder="请输入搜索关键词" class="input"/>
            <div class="ditu" @click="search">
                <van-icon name="map-marked"  class='di'/>
            </div>
        </div>
        <!-- 租房类型 -->
        <div>
             <ul>
              <li>
                <p @click="tiaozhuan1">
                  <van-icon name="wap-home-o" /><br>
                  整租</p>
                </li>
              <li>
                <p @click="tiaozhuan1">
                  <van-icon name="friends-o" /><br>
                  合租</p>
                </li>
              <li>
                <p  @click="search">
                  <van-icon name="guide-o" /><br>
                  地图找房</p>
                </li>
              <li>
                <p @click="resources">
                  <van-icon name="shop-collect-o" /><br>
                  去出租</p>
                </li>
             </ul>
        </div>
        <!-- 租房小组 -->
        <div class="zufang">
          <!-- 头部 -->
             <div class="group">
                <h3>租房小组</h3>
                <p >更多</p>
             </div>
             <!-- 主体 -->
             <div class='subject'>
                  <ul>
                    <li v-for='item in list1' :key="item.id">
                      <img :src="`http://liufusong.top:8080${item.imgSrc}`" alt="">
                      <div>
                          <p>{{item.title}}</p>
                          <p>{{item.desc}}</p>
                      </div>
                    </li>
                  </ul>
             </div>
        </div>
    </div>
</template>

<script>
import request from '@/utils/request'
export default {
  name: 'VueHome',
  data () {
    return {
      value: '',
      list: [],
      list1: [],
      id: '',
      uname: '上海',
      name: 'home'
    }
  },

  mounted () {

  },
  created () {
    // 初始化传来的数据
    this.id = this.$store.state.user.name1
    this.rendering()
    // 渲染住房小组的
    this.groups()
  },
  methods: {
    async rendering () {
      try {
        const red = await request({
          url: '/home/swiper'
        })
        // console.log(red.body)
        this.list = red.body
      } catch (e) {
        console.log(e)
      }
    },
    // 跳转城市列表
    tiaozhuan () {
      this.$router.push(`/citList?uname=${this.uname}`)
    },
    // 跳转到住房
    tiaozhuan1 () {
      this.$router.push('/home/find')
    },
    // 渲染下面页面的接口
    async groups () {
      const red = await request({
        url: `/home/groups?area=${this.id}`
      })
      console.log(red.body)
      this.list1 = red.body
    },
    // 跳转到发布房源页面
    resources () {
      this.$router.push('/resources')
    },
    // 跳转到地图找房
    search () {
      this.$router.push(`/Map-search?name=${this.name}`)
    }
  }
}
</script>

<style lang="less" scoped>
*{
   margin: 0;
   padding: 0;
}
.van-swipe-item{
     height: 212px;
}
.rotograph{
    height: 212px;
}
img{
    height: 100%;
}
      .home{
         text-align: center;
      }
      .my-swipe .van-swipe-item {
          color: #fff;
          font-size: 20px;
          line-height: 212px;
          text-align: center;
          background-color: #39a9ed;

        }
        .search{
           display: flex;
           position: absolute;
           width: 330px;
           height: 40px;
           line-height: 40px;
           overflow: hidden;
           border-radius: 10px;
           top: 5%;
           left: 50%;
           transform: translate(-50%, -50%);
        }
         .input{
            border-radius: 10px;
              width: 70%;
              height: 100%;
           }
          .diqu{
            border-radius: 10px;
             width: 20%;
             height: 100%;
             padding-left: 3px ;
            background-color: #fff;
          }
          .di{
            margin-left: 10px ;
             font-size: 20px;
          }
  ul{
     display: flex;
     height: 120px;
     width: 100%;
     align-content: center;
     li{
       padding-top: 10px ;
       width: 25%;
       .van-icon {
          font-size: 35px;
          color:#2dbc81 ;
          margin-bottom: 15px;
       }
     }
  }
  .zufang{
       height: 190px;
       width: 100%;

       background-color:#f6f5f6;
       .group{
         padding:0 10px ;
           display: flex;
           height: 30px;
           justify-content: space-between;
           overflow: hidden;
           line-height: 30px;
           h3{
              font-size: 16px;
           }
           p{
             font-size: 14px;
           }
       }
  }
  .subject{
     width: 100%;
     height: 100%;
     ul{
     display: flex;
     height: 160px;
     width: 100%;
     align-content: center;
     justify-content: space-between;
     flex-wrap: wrap;
     padding: 0 3%;
     li{
       width: 49%;
       height: 45%;
       margin-top: 2%;
       border-radius: 5%;
       background-color: #fff;
       display: flex;
       align-content: center;
       img{
         width: 50px;
         height: 50px;
         background-color: #ffa9a9;
         margin: 0 10px;
       }
       p{
         font-size: 16px;
       }
     }
     }
  }
</style>
